<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 21037
  Date: 2024/6/17
  Time: 08:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    body{
        position: absolute;
    }
    *{
        /* 文本字符不可选中 */
        user-select: none;
    }
    .mainbox {
        display: flex;
        position: relative;
        /* border: 1px solid gray; */
        width: 1150px;
        height: 700px;
        background-image: url("/headPage/img/main.jpg");
        background-size: 100% 100%;
        /* display: none; */
    }
    .orderInter{
        position:absolute;
        border: 1px solid rgba(0, 0, 0, 0.408);
        width: 200px;
        height: 466px;
        right: -175px;
        top: 197px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .orderInter>div{
        /* border: 1px solid green; */
        width: 98%;
        height: 60%;
    }
    .orderInter>div:nth-child(1){
        display: flex;
        justify-content: space-around;
    }
    .orderInter>div:nth-child(1)>div{
        /* border: 1px solid gray; */
        width: 23%;
        height: 40px;
        text-align: center;
        font-family: cursive;
        font-size: 13px;
    }
    .chooseInter{
        display: none ;
        border-top: 1px solid gray;
        width:200px;
        height: 100px;
        position: absolute;
        left: 0px;
        top: 139px;
        /* display: flex; */
    }
    h3{
        text-align: left;
    }
    .chooseInter>div{
        position: absolute;
        top: 53px;
        left: 1px;
        /* border-top: 1px solid gray; */
        width: 196px;
        height: 50px;
        display: flex;
        justify-content: space-between;
    }
    .chooseInter>div>div{
        /* border: 1px solid gray; */
        width: 43px;
        height: 48px;
    }
    .cancel{
        /* */

        position: absolute !important;
        top: 13px !important;
        left: 149px !important;
        width: 57px !important;
        height: 24px !important;
    }
    .cancel>input{
        border: 1px solid rgba(0, 0, 0, 0.435);
        border-radius: 5px;
        font-size: 8px;
        background-color: white;
        width: 58px;
        height: 26px;
        margin-left: -25px;
    }
    .cancel>input:hover{
        cursor: pointer;
        background-color: rgba(0, 128, 41, 0.87);
        color: white;
        transition: all 0.5s;
    }
    .InterContor{
        width: 30px;
        height: 30px;
    }

    .InterContor3{
        width: 30px;
        height: 30px;
    }
    .choose{
        display: none;
        position: absolute;
        left: 0px;
        top: 257px;
        width:200px;
    }
    .choose>h5{
        float: left;
    }
    .choose>div{
        float: left;
        margin-left: 6px;
    }

    .txt{
        text-align: left;
        font-size: 10px;
        color: gray;
    }
    .pice{
        /* border: 1px solid black; */
        width: 40px;
        height: 32px;
    }
    .RMB{
        font-size: 26px;
    }
    .submit{
        display: none ;
        border: 1px solid green;
        border-radius: 20px;
        width: 102px;
        height: 30px;
        position: absolute;
        top: 340px;
        left: 47px;
        text-align: center;
        line-height: 30px;
    }
    .submit:hover{
        cursor: pointer;
        color: white;
        transition: all 0.9s;
        background-color: rgba(0, 128, 41, 0.87);
    }
    .choose>div{
        margin-top: 15px;
        border: 1px solid gray;
        border-radius: 3px;
        width: 25px;
        height: 16px;
        color: black;
        line-height: 16px;
    }
    .choose>div:hover{
        cursor: pointer;
        transition: all 0.4s;
        transform: translateY(-4px);
    }
    h5{
        text-align: left;
        color: rgba(128, 128, 128, 0.653);
    }
    /* 可选 */
    #white{
        color: gray;
    }
    /* 已选 */
    #green{
        color: green;
    }
    /* 使用中 */
    #red{
        color: red;
    }
    /* 不可选 */
    #BlackGray{
        color: purple;
    }
    .InterSpan{
        font-size: 20px !important;
    }
    .mainbox>div{
        position: absolute;
        /* border: 1px solid green; */
        width: 240px;
        justify-content: space-evenly;
        font-size: 12px;
        color: rgba(128, 128, 128, 0.455);
    }
    i {
        font-size: 45px !important;
        color: gray;
    }
    .box-one {
        display: flex;
        height: 50px;
        position: absolute;
        top: 50px;
        left: 30px;
    }
    .box-one>div:hover{
        cursor: pointer;
    }
    .box-two{
        display: flex;
        height: 50px;
        position: absolute;
        top: 140px;
        left: 30px;
    }
    .box-two>div:hover{
        cursor: pointer;
    }
    .box-three{
        display: flex;
        height: 50px;
        position: absolute;
        top: 230px;
        left: 30px;
    }
    .box-three>div:hover{
        cursor: pointer;
    }
    .box-four{
        height: 120px;
        position: absolute;
        top: 315px;
        left: 35px;
        /* border: 1px solid purple; */
        /* width: ; */
    }
    .five>div:hover{
        cursor: pointer;
    }
    .box-five{
        height: 120px;
        position: absolute;
        top: 456px;
        left: 35px;
        /* border: 1px solid purple; */
        /* width: ; */
    }
    .five{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .five>div{
        position: relative;
        /* border: 1px solid gray; */
        width: 26%;
        height: 30%;
    }
    .mainbox >div>div{
        position: relative;
        line-height: 70px;
    }

    .comID{
        position: absolute;
        top: -15px;
        left: 11px;
    }
    .five_comID{
        position: absolute;
        top: -15px;
        left: 11px;
    }
    .onlyHome_comLeftID{
        position: absolute;
        top: -15px;
        left: 38px;
    }
    .onlyHome_comRightID{
        position: absolute;
        top: -15px;
        left: 111px;
    }
    .powerComID{
        position: absolute;
        top: -15px;
        left: 13px;
    }
    .img{
        position: absolute;
        width: 88px;
        height: 70px;
        left: -19px;
        top: -14px;
        display: none;
    }
    .img2{
        position: absolute;
        width: 81px;
        height: 63px;
        left: 7px;
        top: -11px;
        display: none
    }
    .img3{
        position: absolute;
        width: 81px;
        height: 63px;
        left: 82px;
        top: -11px;
        display: none
    }
    .img4{
        position: absolute;
        width: 88px;
        height: 70px;
        left: -20px;
        top: -14px;
        display: none
    }
    /* 单人包 */
    .onlyOneHome{
        position: absolute;
        top: 110px;
        left: 378px;
        /* border: 1px solid red; */
        height: 550px;
    }
    .onlyOneHome>div{
        display: flex;
        justify-content: space-evenly;
        width: 173px;
        height: 60px;

    }
    .onlyOneHome>div>div:hover{
        cursor: pointer;
    }
    .home_three{
        margin-top: 231px;
        margin-left: -16px;
    }
    .home_four{
        margin-top: 15px;
        margin-left: -17px;
    }
    .double_home{
        margin-top: 121px;
        margin-left: -20px;
    }
    /* 高端大厅 */
    .powerInter{
        left: 563px;
        top: 309px;
        /* border: 1px solid gray; */
        width: 363px !important;
        height: 196px;
    }
    .powerInter>div{
        display: flex;
        justify-content: space-around;
        margin-top: 13px;
        width: 100%;
        /* border: 1px solid green; */
        height: 25%;
    }
    .powerInter>div>div{
        position: relative;
        width: 15%;
        /* border: 1px solid green; */
        height: 100%;
    }
    .powerInter>div>div:hover{
        cursor: pointer;
    }
    .double_home2{
        display: flex;
        justify-content: space-between;
        /* border: 1px solid gray; */
        width: 172px !important;
        height: 60px;
        left: 570px;
        bottom: 43px;
    }
    .double_home2>div:hover{
        cursor: pointer;
    }
    .double_home3{
        display: flex;
        justify-content: space-between;
        /* border: 1px solid gray; */
        width: 172px !important;
        height: 60px;
        left: 782px;
        bottom: 43px;
    }
    .double_home3>div:hover{
        cursor: pointer;
    }
    .normol{
        /* border: 1px solid gray; */
        width: 550px !important;
        height: 189px;
        left: 363px;
        top: 40px;
    }
    .normol>div{
        /* border: 1px solid purple; */
        width: 100%;
        height: 36%;
        margin-top: 24px;
        display: flex;
        justify-content: space-around;
    }
    .normol>div>div{
        position: relative;
        /* border: 1px solid gray; */
        width: 8%;
        height: 58%;
    }
    .normol>div>div>div:hover{
        cursor: pointer;
    }
</style>
<link rel="stylesheet" href="/lib/css/font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="/lib/css/font-awesome-4.7.0/css/font-awesome.css" />
<script src="/lib/js/jQuery.js"></script>
<body>
  <div class="mainbox">
    <!-- <i class="fa fa-tv" aria-hidden="true" /></i>  -->
    <!-- 第一个盒子 循环区间[0,2]-->
    <div class="box-one">
        <c:forEach items="${list}" var="c" begin="0" end="2">
            <div id="${c.cid}"><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">${c.cname}</span></div>
        </c:forEach>
    </div>
    <!-- 第二个盒子 循环区间[3,5]-->
    <div class="box-two">
        <c:forEach items="${list}" var="c" begin="3" end="5">
            <div id="${c.cid}"><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">${c.cname}</span></div>
        </c:forEach>
    </div>
    <!-- 第三个盒子 循环区间[6,8]-->
    <div class="box-three">
<div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">060</span></div>
        </div>        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">008</span></div>
      <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="comID">009</span></div>
    </div>
    <!-- 第四个盒子 -->
    <div class="box-four">
      <div class="five">
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">010</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">011</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">012</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">013</span></div>
        <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">014</span></div>
      </div>
    </div>
      <!-- 第五个盒子 -->
      <div class="box-five">
        <div class="five">
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">015</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">016</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">017</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">018</span></div>
          <div><img class="img" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="five_comID">019</span></div>
        </div>
      </div>
      
      <div class="onlyOneHome">
         <!-- 单人包间3 -->
         <div class="home_three">
          <div>
            <div><img class="img2" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comLeftID">022</span></div>
          </div>
         <div>
            <div><img class="img3" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comRightID">023</span></div>
        </div>
        </div>
        <!-- 单人包间3 -->
        <div class="home_four">
          <div>
            <div><img class="img2" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comLeftID">024</span></div>
          </div>
         <div>
            <div><img class="img3" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comRightID">025</span></div>
        </div>
        </div>
        <!-- 双人包 -->
        <div class="double_home">
          <div>
            <div><img class="img2" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comLeftID">026</span></div>
          </div>
         <div>
            <div><img class="img3" src="/headPage/img/check.png" alt=""><i class="fa fa-tv" aria-hidden="true" /></i> <span class="onlyHome_comRightID">027</span></div>
        </div>
        </div>
      </div>
      <!-- 高端大厅 -->
      <div class="powerInter">
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">028</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">029</span></div>

          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">030</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">031</span></div>

        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">033</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">034</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">035</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">036</span></div>

        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">038</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">039</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">040</span></div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">041</span></div>
        </div>
      </div>
      <!--双人包2  -->
      <div class="double_home2">
        <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">043</span></div>
        <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">044</span></div>
      </div>
       <!--双人包3  -->
       <div class="double_home3">
        <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">045</span></div>
        <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">046</span></div>
      </div>
      <!-- 普通 -->
      <div class="normol">
          <!--  -->
        <div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">020</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">021</span></div>
        </div>
        <div>
         <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">047</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">048</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">049</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">050</span></div>
        </div>
        <div>
           <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">051</span></div>
        </div>
        <div>
           <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">052</span></div>
        </div>
      </div>
      <!--  -->
        <div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">053</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">054</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">055</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">056</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">057</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">058</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">060</span></div>
        </div>
        <div>
          <div><img class="img4" src="/headPage/img/check.png" alt=""> <i class="fa fa-tv" aria-hidden="true" /></i><span class="powerComID">060</span></div>
        </div>
      </div>
      </div>
  </div>
  <div class="orderInter">
    <div>
      <div>
        <span class="fa fa-tv InterSpan" id="gray" aria-hidden="true"></span>
     <br>
        可选
      </div>
      <div>
        <span class="fa fa-tv InterSpan" id="green" aria-hidden="true"></span>
     <br>
        已选
      </div>
      <div>
        <span class="fa fa-tv InterSpan" id="red" aria-hidden="true"></span>
     <br>
        使用中
      </div>
      <div>
        <span class="fa fa-tv InterSpan" id="BlackGray" aria-hidden="true"></span>
     <br>
        不可选
        <div class="chooseInter">
          <h3 class="InterNo">001号机</h3>
          <div class="cancel">
            <input type="submit" value="取消预订">
          </div>
         <div>
           <div><img class="InterContor" src="/headPage/img/cpu.png" alt="">
        
          <span class="txt">  i5-12400F</span>
          </div>
          
           <div><img class="InterContor" src="/headPage/img/ram3.png" alt="">
         
         <span class="txt"> 32G</span></div>
           <div><img class="InterContor" src="/headPage/img/gpu.png" alt="">
          
           <span class="txt">RTX 3060</span>
          </div>
           <div>
             <div class="pice">
               <span>&#xA5;<span class="RMB">9</span></span>
             </div>
             <span class="txt">会员价</span>
           </div>
         </div>
        </div>
        <div class="choose">
          <h5>已选：</h5>
          <!-- <div>001</div>
          <div>002</div>
          <div>003</div>
          <div>004</div>
          <div>005</div> -->
        </div>
        <div class="submit">确认选座</div>
      </div>
  </div>
  <!-- 原生js -->
  <script>
    var arry=document.querySelectorAll('.box-one>div')
    var arry2=document.querySelectorAll('.box-two>div')
    var arry3=document.querySelectorAll('.box-three>div')
    var arry4=document.querySelectorAll('.five>div')
    var arry5=document.querySelectorAll('.home_one>div>div')
    var arry6=document.querySelectorAll('.home_two>div>div')
    var arry7=document.querySelectorAll('.home_three>div>div')
    var arry8=document.querySelectorAll('.home_four>div>div')
    var arry9=document.querySelectorAll('.double_home>div>div')
    var arry10=document.querySelectorAll('.powerInter>div>div')
    var arry11=document.querySelectorAll('.double_home2>div')
    var arry12=document.querySelectorAll('.double_home3>div')
    var arry13=document.querySelectorAll('.normol>div>div>div')
    clickColor(arry)
     clickColor(arry2)
     clickColor(arry3)
     clickColor(arry4)      
     clickColor(arry5)
     clickColor(arry6)
     clickColor(arry7)
     clickColor(arry8)
     clickColor(arry9)
     clickColor(arry10)
     clickColor(arry11)
     clickColor(arry12)
     clickColor(arry13)
   //最大预订5个位置
    var onclickCount=5;
    //预约满员标识
    var flag=false;
    //点击节点数组
    var array=[];
    //保存前5个预订位置元素节点
    var arrayEleList=[]
    $(function(){
      
      $('.cancel').click(function(){
        var interNo=$('h3').text().substring(0,3)
        //匹配指定位置的电脑
        arrayEleList.forEach(ele=>{
          if(ele[2].innerText==interNo){                        
            ele[0].style.display='none'
            ele[1].style.color='gray'
            ele[2].style.color='rgba(128, 128, 128, 0.455)' 
            var arrayCos=$('.choose>div')     
           for (let i = 0; i < arrayCos.length; i++) {
          if(arrayCos[i].innerText==interNo){
            arrayCos[i].remove()
            arrayEleList.splice(i,1)
             //设置上一个机子信息
             if(i!=0){
              $('h3').text(arrayCos[i-1].innerText+'号机')
              //改变该机子的背景颜色---（当前索引位-1
              $('.choose>div').eq(i-1).css({
                'background-color':'rgba(0, 128, 41, 0.87)',
                'color':'white'
              })            
             }
             if(arrayEleList.length==0){
              document.querySelector('.submit').style.display='none'  
                document.querySelector('.choose').style.display='none'  
                document.querySelector('.chooseInter').style.display='none'
             }
            break           
          }
        }
        if(onclickCount==5){
          onclickCount=5
        }
        else {
               onclickCount++
        }       
          }
        })         
      })
    })  
    function clickColor(arry){
      arry.forEach(element => {
      element.addEventListener('click',function(){          
      document.querySelector('.submit').style.display='inline-block'                 
      document.querySelector('.choose ').style.display='inline-block'    
      document.querySelector(' .chooseInter ').style.display='inline-block'    
        var isColor=this.children[1].getAttribute('style')
        if(isColor==null||isColor=='color: gray;'){ 
          onclickCount-- 
          if(flag){
           array.forEach(element => {
             element[0].style.display='none'
           });
            //清除上一次点击的节点
            array=[]
          }           
          this.children[0].style.display='block'
          //未满员时继续预订
          if(onclickCount>=0){      
          this.children[1].style.color='green'
          this.children[2].style.color='black'
          arrayEleList.push(this.children)   
           //隐藏->取消预约按钮
           document.querySelector('.cancel').style.display='block'
          }else{
             //预订满员时，保存此次点击的元素节点
              array.push(this.children)
              flag=true
              onclickCount=0
              //隐藏->取消预约按钮
              document.querySelector('.cancel').style.display='none'
          }                            
          // Jquery开始  
        $(function(){
          // 机号
          var NO=$(element).children(2).text()
          var InterNo=$('.InterNo')
          InterNo.text(NO+'号机')        
          var ChooseInterNo=$('.choose')
          if(ChooseInterNo.children().length<=5){
            //清除之前选中的背景颜色
            $('.choose>div').css({
              'background-color':'white',
                'color':'black'
            })
            var ele=$('<div style="background-color:rgba(0, 128, 41, 0.87);color:white">'+NO+'</div>')
            ChooseInterNo.append(ele)               
          } else{
             //清除之前选中的背景颜色
             $('.choose>div').css({
              'background-color':'white',
                'color':'black'
            })
          }
          //鼠标点击已选位置----动态绑定事件
        $('.choose').on('click',"div",function(){     
              InterNo.text($(this).text()+'号机')
              // 其他节点不改变颜色
              $('.choose>div').eq($(this).index()-1).siblings().css({
              'background-color':'white',
               'color':'black'
            })
              //指定节点改变颜色
             $(this).css({
                'background-color':'rgba(0, 128, 41, 0.87)',
                'color':'white'
              });     
               //显示->取消预约按钮
               document.querySelector('.cancel').style.display='block'  
            })
       })
        // Jquery结尾 
        }else{           
          flag=false;
          //始终认为数组第一个元素是上一次点击的节点        
           if(onclickCount==0&array.length>0){
            array[0][0].style.display='none'
          }
          onclickCount++     
          this.children[0].style.display='none'
          this.children[1].style.color='gray'
          this.children[2].style.color='rgba(128, 128, 128, 0.455)'
             // Jquery开始
          //索引开始位置
          var index=0;
          arrayEleList.forEach(e => {   
            var text=e[2].innerText
            if(text==this.children[2].innerText){              
              var arrayCos=document.querySelectorAll('.choose>div')
              //如果没有预订位置，则隐藏侧边栏信息
              if(arrayCos.length==1){           
                 /*
                   初始隐藏标签
                  .submit
                  .choose  
                  .chooseInter
                  */   
                document.querySelector('.submit').style.display='none'  
                document.querySelector('.choose').style.display='none'  
                document.querySelector('.chooseInter').style.display='none'
              }
              arrayCos.forEach(n => {
                if(n.innerHTML==text){
                  n.remove()
                  arrayEleList.splice(index,1)
                  return;
                }
              });
            }
            index++;       
          });
        }   
  
      })
    });           
  }
  </script>
</body>
</html>
